<template>
  <view class="download-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="title">资料下载</view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <text class="uni-icon-search"></text>
        <input type="text" placeholder="搜索资料名称、科目" />
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="categories">
      <view
        class="category-tag"
        v-for="(tag, index) in categories"
        :key="index"
        :class="{ active: activeCategory === index }"
        @tap="activeCategory = index"
      >
        {{ tag }}
      </view>
    </view>

    <!-- 资料列表 -->
    <view class="resource-list">
      <view class="resource-item" v-for="(item, index) in resources" :key="index">
        <view class="resource-icon" :class="item.type">
          <text class="icon-text">{{ item.type.toUpperCase() }}</text>
        </view>
        <view class="resource-content">
          <view class="resource-title">{{ item.title }}</view>
          <view class="resource-info">
            <text class="resource-size">{{ item.size }}</text>
            <text class="resource-downloads">{{ item.downloads }}次下载</text>
          </view>
        </view>
        <view class="download-button">
          <text class="download-text">下载</text>
        </view>
      </view>
    </view>

    <!-- 推荐资料 -->
    <view class="recommended-section">
      <view class="section-header">
        <text class="section-title">推荐资料</text>
      </view>

      <view class="recommended-list">
        <view class="recommended-item" v-for="(item, index) in recommendedResources" :key="index">
          <image class="item-cover" :src="item.cover" mode="aspectFill"></image>
          <view class="item-info">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 分类标签
const categories = ['全部', '政治', '英语', '数学', '专业课', '考研大纲', '真题']
const activeCategory = ref(0)

// 资料列表
const resources = ref([
  {
    title: '2024年考研政治大纲解析',
    size: '15.2MB',
    downloads: 2568,
    type: 'pdf',
  },
  {
    title: '英语二真题解析（2010-2023）',
    size: '45.6MB',
    downloads: 3642,
    type: 'doc',
  },
  {
    title: '数学一历年考点分布与分析',
    size: '8.7MB',
    downloads: 1985,
    type: 'xls',
  },
  {
    title: '考研专业课参考书目汇总',
    size: '2.3MB',
    downloads: 4271,
    type: 'pdf',
  },
  {
    title: '2024年考研英语词汇表',
    size: '3.5MB',
    downloads: 5632,
    type: 'doc',
  },
])

// 推荐资料
const recommendedResources = ref([
  {
    title: '肖秀荣政治1000题',
    desc: '覆盖核心考点，含详细解析',
    cover: '/static/images/politics.jpg',
  },
  {
    title: '张宇数学基础30讲',
    desc: '高等数学精讲与习题',
    cover: '/static/images/math.jpg',
  },
  {
    title: '考研英语长难句解析',
    desc: '包含阅读理解难句精解',
    cover: '/static/images/english.jpg',
  },
])
</script>

<style lang="scss">
@import '@/styles/variables.scss';

.download-container {
  min-height: 100vh;
  background-color: #f8f8f8;

  .header {
    height: 180rpx;
    background: linear-gradient(180deg, $theme-color 0%, $light-theme-color 100%);
    display: flex;
    align-items: flex-end;
    padding: 0 30rpx 20rpx;

    .title {
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .search-box {
    padding: 30rpx;

    .search-input {
      height: 80rpx;
      background: #fff;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

      .uni-icon-search {
        font-size: 32rpx;
        color: #999;
        margin-right: 20rpx;
      }

      input {
        flex: 1;
        height: 80rpx;
        font-size: 28rpx;
      }
    }
  }

  .categories {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;

    .category-tag {
      padding: 12rpx 30rpx;
      background-color: #fff;
      border-radius: 30rpx;
      margin: 0 10rpx 20rpx;
      font-size: 26rpx;
      color: #666;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      &.active {
        background-color: $theme-color;
        color: #fff;
      }
    }
  }

  .resource-list {
    padding: 20rpx 30rpx;

    .resource-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

      .resource-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;

        .icon-text {
          color: #fff;
          font-size: 20rpx;
          font-weight: bold;
        }

        &.pdf {
          background-color: #e74c3c;
        }

        &.doc {
          background-color: #3498db;
        }

        &.xls {
          background-color: #2ecc71;
        }
      }

      .resource-content {
        flex: 1;

        .resource-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .resource-info {
          display: flex;

          .resource-size,
          .resource-downloads {
            font-size: 24rpx;
            color: #999;
            margin-right: 20rpx;
          }
        }
      }

      .download-button {
        width: 120rpx;
        height: 60rpx;
        background-color: rgba(147, 112, 219, 0.1);
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .download-text {
          font-size: 24rpx;
          color: $theme-color;
        }
      }
    }
  }

  .recommended-section {
    background-color: #fff;
    padding: 30rpx;
    margin: 20rpx 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

    .section-header {
      margin-bottom: 20rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .recommended-list {
      .recommended-item {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .item-cover {
          width: 160rpx;
          height: 120rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;
        }

        .item-info {
          flex: 1;

          .item-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
          }

          .item-desc {
            font-size: 24rpx;
            color: #666;
            line-height: 1.5;
          }
        }
      }
    }
  }
}
</style>
